<template>
  <div class="item-box">
    <div class="item-list" v-for="(group, mindex) in group1" :key="mindex" v-show="mindex < maxLevel">
      <draggable :list="group1[mindex]" handle=".move" animation="150" @end="dragEnd(mindex)">
        <div
          class="item"
          v-for="(item, index) in group"
          :key="index"
          @click="setItem(mindex, index)"
          :class="{ active: active[mindex] === index }"
        >
          <i class="MC_iconfont move el-icon-rank" style="float: left; cursor: move"></i>
          <el-input
            v-model="item.value"
            placeholder="请输入选项"
            :maxlength="50"
            @change="itemChange($event, mindex, index)"
          ></el-input>
          <div class="operate">
            <i class="MC_iconfont el-icon-delete" @click.stop="remove(mindex, index, item)"></i>
          </div>
        </div>
      </draggable>
      <div @click="add(mindex)" class="add-btn"><i class="MC_iconfont el-icon-plus" />添加选项</div>
    </div>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import * as uuid from 'uuid'
import { deepClone } from '@/utils/m7Utils'
export default {
  name: 'treeTable',
  data() {
    return {
      group1: [[], [], [], [], []], // 五个数组保存不同层级的数据
      active: [-1, -1, -1, -1, -1], // 当前各个层级选中的index
      maxLevel: 2, //最大层级 默认两级
      index: 0
    }
  },
  props: {
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  watch: {
    group1: {
      handler(newVal, oldVal) {
        // eslint-disable-next-line vue/no-mutating-props
        this.form.options.children = this.getData().children
      },
      deep: true
    }
  },
  components: {
    draggable
  },
  methods: {
    // 添加数据
    add(mindex) {
      let arr = this.group1[mindex]
      arr.push({
        value: '',
        key: uuid.v1().replace(/-/g, '')
      })
      this.$set(this.group1, mindex, arr)
    },
    // 删除数据，如果删除的是当前选中的，需要处理下一层级数据
    remove(mindex, index) {
      this.group1[mindex].splice(index, 1)
      if (index === this.active[mindex]) {
        this.$set(this.active, mindex, -1)
        for (let i = mindex + 1; i < this.maxLevel; i++) {
          this.$set(this.active, i, -1)
          this.$set(this.group1, i, [])
        }
      }
    },
    dragEnd(mindex) {
      this.setItem(mindex, this.active[mindex]) // 拖拽结束后active的children更新
      if (mindex - 1 >= 0) {
        // 更新group1[0]的数据为拖拽后的数据---预览的数据为拖拽后的数据
        this.$set(this.group1[mindex - 1][this.active[mindex - 1]], 'children', this.group1[mindex])
      }
    },
    // 设置当前选中数据
    setItem(mindex, index) {
      // mindex---层级的key  index---当前层级选中的key
      if (mindex < this.maxLevel - 1) {
        this.$set(this.active, mindex, index)
        for (let i = mindex + 1; i < this.maxLevel; i++) {
          this.$set(this.active, i, -1)
          this.$set(this.group1, i, [])
        }
        if (!(this.group1[mindex] && this.group1[mindex][index] && this.group1[mindex][index].children)) {
          this.$set(this.group1[mindex][index], 'children', [])
        }
        // 选中的下一级展示选中层级的children
        this.$set(this.group1, mindex + 1, this.group1[mindex][index].children)
      }
    },
    // 设置层级
    setLevel(level) {
      if (level >= this.maxLevel) {
        this.maxLevel = level
      } else {
        this.maxLevel = level
        const newData = JSON.parse(JSON.stringify(this.group1[0]))
        newData.map((v) => {
          this.filterData(v, 1)
        })
        this.setData({
          children: newData,
          level
        })
        this.active[level - 1] = -1
        for (let i = level; i < 5; i++) {
          this.$set(this.active, i, -1)
          this.$set(this.group1, i, [])
        }
      }
    },
    filterData(data, level) {
      if (level === this.maxLevel) {
        data.children = null
      } else if (data.children) {
        data.children.map((v) => {
          this.filterData(v, level + 1)
        })
      }
    },
    removeEmpty(data) {
      const newData = []
      data.map((v) => {
        if (v.value !== '') {
          newData.push(v)
        }
      })
      return newData
    },
    // 过滤name为空的数据
    removeLoop(inData) {
      inData = this.removeEmpty(inData)
      inData.map((v) => {
        if (v.children && v.children.length > 0) {
          v.children = this.removeEmpty(v.children)
          this.removeLoop(v.children)
        } else {
          v.children = null
        }
      })
      return {
        children: inData,
        level: this.maxLevel
      }
    },
    // 获取数据
    getData() {
      return this.removeLoop(deepClone(this.group1[0] ? this.group1[0] : []))
    },
    itemChange(val, mindex, index) {
      this.group1[mindex].map((v, i) => {
        if (i !== index && val === v.value) {
          this.$message.error('选项已存在')
          this.$set(this.group1[mindex][index], 'value', '')
        }
      })
    },
    setData(data) {
      this.$set(this.group1, 0, data.children)
      this.maxLevel = data.level
      for (let i = 0; i < data.level; i++) {
        // 编辑默认展示
        this.setItem(i, 0)
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import "../../../../../assets/common.styl"
.item-box
  overflow auto
  white-space nowrap
  display flex
  .item-list
    background #fafafa
    width 200px
    border-radius 4px
    overflow hidden
    flex 1 0 auto
    flex-basis 200px
    margin-right 8px
    padding 8px 0
    display inline-block
    .active
      color #008cee
      background #e5f3fd
    .MC_iconfont
      color rgba(0, 0, 0, 0.38)
    .add-btn
      cursor pointer
      color $c-main
      margin-left 20px
      .el-icon-plus
        color $c-main
        margin-right 6px
    .num
      border-bottom 1px solid #E7E9ED
      padding 0 15px
      color #303753
    .item
      line-height 32px
      padding 8px 16px
      cursor pointer
      overflow hidden
      .el-input
        width 120px
        float left
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        margin-left 10px
      .operate
        float right
        line-height 32px
        i
          color rgba(0, 0, 0, 0.38)
          cursor pointer
          &:hover
            color #fc6c5c
.el-icon-rank
  color: rgba(0,0,0,0.38);
  padding-top: 9px;
  font-size: 20px;
</style>
